<template>
	<div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;" :style="{'background-image': bgUrl}">
		<div id="login">
			<h2 style="text-align: center;margin: 20px auto;">在线教育后台管理系统</h2>
			<el-form ref="form" :model="form" >
			  <el-form-item >
			    <el-input placeholder="账号" v-model="form.name"  prefix-icon="el-icon-s-custom"></el-input>
			  </el-form-item>
			  <el-form-item >
			    <el-input placeholder="密码" v-model="form.password"   prefix-icon="el-icon-lock"></el-input>
			  </el-form-item>
			  <el-form-item style="display: flex;justify-content: center;">
			    <el-button type="primary" @click="onSubmit" style="width: 300px;">登&nbsp;&nbsp;&nbsp;&nbsp;陆</el-button>
			    
			  </el-form-item>
			</el-form>
			
		</div>
	</div>
	
</template>

<script>
	import {doLogin} from '../api/login.js'
	export default {
	    data() {
	      return {
	        form: {
	          name: '',
	          password: ''
	        },
			bgUrl:""
			//  url('httpsdf')
			// bgUrl:"url('"+require('../assets/background.jpg')+"')"
	      }
	    },
	    methods: {
	      onSubmit() {
	        doLogin(this.form).then(res=>{
				console.log(res.data)
				if(res.data.code==200){
					
					let user = res.data.data;
					this.$message({
						message:"登陆成功",
						type:"success"
					})
					// 保存用户信息  localStorage、SessionStorage
					localStorage.setItem("id",user.id);
					localStorage.setItem("token",user.token);
					localStorage.setItem("name",user.name);
					// 跳刀后台 会员管理界面
					this.$router.push("/user");
				}else{
					this.$message({
						message:res.data.message,
						type:"error"
					})
					
				}
			})
	      }
	    }
	  }
	
</script>

<style>
	
	#login{
		width: 400px;
		/* height: 450px; */
		background-color: white;
		border-radius: 10px;
		padding: 20px;
	}
	
	*{
		margin: 0;
		padding: 0;
	}
	html,body,#app,section,aside{
		height:100%;
	}
</style>